<meta http-equiv="Content-Type" content="text/html; charset=<!--[charset]-->" />
<title><!--[title]--></title>
<meta name="description" content="<!--[slogan]-->" />
<meta name="keywords" content="<!--[keywords]-->" />
<link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/style.css" media="print,projection,screen" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/general.css" media="print,projection,screen" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/menu.css" media="print,projection,screen" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/block_search.css" media="print,projection,screen" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/tab-category.css" media="print,projection,screen" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="<!--[$stylepath]-->/newproduct.css" media="print,projection,screen" />
<!--[modulestylesheet xhtml=true]-->
<!--[if $pagetype eq 'admin']--><!--[modulestylesheet stylesheet=admin.css modname=admin xhtml=true]--><!--[/if]-->
    <!-- jQuery library -->
   <script type="text/javascript" src="themes/instrument/js/jquery-1.6.1.min.js"></script>
   <script src="modules/InnoForum/pnjavascript/tooltip/jquery.tools.min.js" type="text/javascript"></script>
    <!--<script type="text/javascript" src="../lib/js/jquery/jquery-1.6.2.min.js"></script>-->
	<script type="text/javascript" src="themes/instrument/js/jqtransform/jqtransformplugin/jquery.jqtransform.js" ></script>
    <link rel="stylesheet" type="text/css" href="themes/instrument/js/jqtransform/jqtransformplugin/jqtransform.css" media="print,projection,screen" />
	<script language="javascript">
		$(function(){
			$('form').jqTransform({imgPath:'themes/instrument/js/jqtransform/jqtransformplugin/img'});
		});
	</script>
    <!-- jQuery Plugin scripts -->
    <script type="text/javascript" src="themes/instrument/js/jquery.sliderkit.1.8/lib/js/jquery/jquery.easing.1.3.min.js"></script>
    <script type="text/javascript" src="themes/instrument/js/jquery.sliderkit.1.8/lib/js/jquery/jquery.mousewheel.min.js"></script>
    
    <!-- Slider Kit scripts -->
    <script type="text/javascript" src="themes/instrument/js/jquery.sliderkit.1.8/lib/js/sliderkit/jquery.sliderkit.1.8.min.js"></script>		
    <script type="text/javascript" src="themes/instrument/js/jquery.sliderkit.1.8/lib/js/sliderkit/addons/sliderkit.delaycaptions.min.js"></script>

    <!-- Slider Kit launch -->
    <script type="text/javascript">
        $(window).load(function(){ //$(window).load() must be used instead of $(document).ready() because of Webkit compatibility
            $(".delaycaptions-02").sliderkit({
                circular:false,
                mousewheel:true,
                keyboard:true,
                shownavitems:4,
                auto:true,
                circular:true,
                fastchange:false,
                autospeed:4000,
                panelfxspeed:800,			
                delaycaptions:{
                    delay:600,
                    position:"left",
                    transition:"fading",
                    duration:500,
                    easing:"easeOutExpo",
                    hold:true
                }                
            });		
        });
    </script>  

		<!-- Slider Kit styles -->
		<link rel="stylesheet" type="text/css" href="themes/instrument/js/jquery.sliderkit.1.8/lib/css/sliderkit-core.css" media="screen, projection" />
		<link rel="stylesheet" type="text/css" href="themes/instrument/js/jquery.sliderkit.1.8/lib/css/sliderkit-demos.css" media="screen, projection" />
		<!-- Slider Kit compatibility -->	

<script type="text/javascript">
	$(document).ready(function () {
	  $('#nav > li > a').click(function(){
		if ($(this).attr('class') != 'active'){
		  $('#nav li ul').slideUp();
		  $(this).next().slideToggle();
		  $('#nav li a').removeClass('active');
		  $(this).addClass('active');
		}
	  });
	});
</script>
<!--menu -->	
<script type="text/javascript" src="themes/instrument/js/menu/menu.js"></script>

	<!-- the necessary css for UItoTop -->	
	<link rel="stylesheet" type="text/css" media="screen,projection" href="themes/instrument/js/top-scrollbar/css/ui.totop.css" />
	<script src="themes/instrument/js/top-scrollbar/js/easing.js" type="text/javascript"></script>
	<script src="themes/instrument/js/top-scrollbar/js/jquery.ui.totop.js" type="text/javascript"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			var defaults = {
	  			containerID: 'moccaUItoTop', // fading element id
				containerHoverClass: 'moccaUIhover', // fading element hover class
				scrollSpeed: 1200,
				easingType: 'linear' 
	 		};		
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>


<!-- the scrollbar -->
<link rel="stylesheet" type="text/css" href="themes/instrument/js/ScrollbarVisibility/css/style.css" />
<link rel="stylesheet" type="text/css" href="themes/instrument/js/ScrollbarVisibility/css/jquery.jscrollpane.codrops2.css" />
<!-- the mousewheel plugin -->
<script type="text/javascript" src="themes/instrument/js/ScrollbarVisibility/js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="themes/instrument/js/ScrollbarVisibility/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="themes/instrument/js/ScrollbarVisibility/js/scroll-startstop.events.jquery.js"></script>
<script type="text/javascript">
		$(function() {
		
			// the element we want to apply the jScrollPane
			var $el					= $('#jp-container').jScrollPane({
				verticalGutter 	: -16
			}),
					
			// the extension functions and options 	
				extensionPlugin 	= {
					
					extPluginOpts	: {
						// speed for the fadeOut animation
						mouseLeaveFadeSpeed	: 500,
						// scrollbar fades out after hovertimeout_t milliseconds
						hovertimeout_t		: 1000,
						// if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
						// if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
						// also, it will be shown when we start to scroll and hidden when stopping
						useTimeout			: false,
						// the extension only applies for devices with width > deviceWidth
						deviceWidth			: 980
					},
					hovertimeout	: null, // timeout to hide the scrollbar
					isScrollbarHover: false,// true if the mouse is over the scrollbar
					elementtimeout	: null,	// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
					isScrolling		: false,// true if scrolling
					addHoverFunc	: function() {
						
						// run only if the window has a width bigger than deviceWidth
						if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;
						
						var instance		= this;
						
						// functions to show / hide the scrollbar
						$.fn.jspmouseenter 	= $.fn.show;
						$.fn.jspmouseleave 	= $.fn.fadeOut;
						
						// hide the jScrollPane vertical bar
						var $vBar			= this.getContentPane().siblings('.jspVerticalBar').hide();
						
						/*
						 * mouseenter / mouseleave events on the main element
						 * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
						 */
						$el.bind('mouseenter.jsp',function() {
							
							// show the scrollbar
							$vBar.stop( true, true ).jspmouseenter();
							
							if( !instance.extPluginOpts.useTimeout ) return false;
							
							// hide the scrollbar after hovertimeout_t ms
							clearTimeout( instance.hovertimeout );
							instance.hovertimeout 	= setTimeout(function() {
								// if scrolling at the moment don't hide it
								if( !instance.isScrolling )
									$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
							}, instance.extPluginOpts.hovertimeout_t );
							
							
						}).bind('mouseleave.jsp',function() {
							
							// hide the scrollbar
							if( !instance.extPluginOpts.useTimeout )
								$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
							else {
							clearTimeout( instance.elementtimeout );
							if( !instance.isScrolling )
									$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
							}
							
						});
						
						if( this.extPluginOpts.useTimeout ) {
							
							$el.bind('scrollstart.jsp', function() {
							
								// when scrolling show the scrollbar
								clearTimeout( instance.hovertimeout );
								instance.isScrolling	= true;
								$vBar.stop( true, true ).jspmouseenter();
								
							}).bind('scrollstop.jsp', function() {
								
								// when stop scrolling hide the scrollbar (if not hovering it at the moment)
								clearTimeout( instance.hovertimeout );
								instance.isScrolling	= false;
								instance.hovertimeout 	= setTimeout(function() {
									if( !instance.isScrollbarHover )
										$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
								}, instance.extPluginOpts.hovertimeout_t );
								
							});
							
							// wrap the scrollbar
							// we need this to be able to add the mouseenter / mouseleave events to the scrollbar
							var $vBarWrapper	= $('<div/>').css({
								position	: 'absolute',
								left		: $vBar.css('left'),
								top			: $vBar.css('top'),
								right		: $vBar.css('right'),
								bottom		: $vBar.css('bottom'),
								width		: $vBar.width(),
								height		: $vBar.height()
							}).bind('mouseenter.jsp',function() {
								
								clearTimeout( instance.hovertimeout );
								clearTimeout( instance.elementtimeout );
								
								instance.isScrollbarHover	= true;
								
								// show the scrollbar after 100 ms.
								// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar								
								instance.elementtimeout	= setTimeout(function() {
									$vBar.stop( true, true ).jspmouseenter();
								}, 100 );	
								
							}).bind('mouseleave.jsp',function() {
								
								// hide the scrollbar after hovertimeout_t
								clearTimeout( instance.hovertimeout );
								instance.isScrollbarHover	= false;
								instance.hovertimeout = setTimeout(function() {
									// if scrolling at the moment don't hide it
									if( !instance.isScrolling )
										$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
								}, instance.extPluginOpts.hovertimeout_t );
								
							});
							
							$vBar.wrap( $vBarWrapper );
						
						}
					
					}
					
				},
				
				// the jScrollPane instance
				jspapi 			= $el.data('jsp');
				
			// extend the jScollPane by merging	
			$.extend( true, jspapi, extensionPlugin );
			jspapi.addHoverFunc();
		
		});
	</script> 